<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>apobates jQuery dialog plug</title>
<style type="text/css">
/*插件需要的样式*/
/*overlay*/
.dialog_overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	/*visibility: hidden;*/
	top: 0;
	left: 0;
	z-index: 10010;
	/*opacity: 0;*/
	background: rgba(0,0,0,0.5);
	transition: all 0.3s;
}
#apoDialog{
    /*display:none;*/
	/*top: 300px;*/
	/*left: 300px;*/

}

.dialog_footer{margin:0}
        .dialog_footer>a{display:inline-block;width:50%;line-height:40px;height:40px;text-align:center;color:#666}
        .dialog_footer>a.active{background-color:#f1f1f1;color:#005CA1}        
.dialog{position: fixed;z-index: 10012;background-color:#fff; border-width:10px;border-color:rgba(0,0,0,.55);border-style:solid}
.dialog_closed{
        position:absolute;
        right:0;top:0;
        
        display: inline-block;
        height: 30px;
        width: 30px;
        background-repeat:no-repeat;font-size:0;overflow:hidden;cursor:pointer;
        
}
.dialog div{padding:2em 30px;}
.dialog>p:first-child{height:30px;line-height:30px;text-indent:10px;background-color:#f1f1f1;color:#333}
/*测试样式*/
.prefix_icon{font-style:normal;display:inline-block;padding:0 10px}
.c:after{
content:";-)";
}
.b:after{
content:":-O";
}
.a:after{
content:":-D"; 
}

</style>
</head>

<body>
<script type="text/javascript" charset="UTF-8" src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="jquery.apoDialog.js"></script>
<script type="text/javascript">
jQuery(function($){
    //对$.apoDialog.alert的包装,用以提示不同类型的消息:成功,失败,提示
    //可以自行定义图标
    $.kc_alert=function(message,level,extJS){
        var skin={};
        switch(level){
            case 'acc':
                skin.color='green';
                skin.icon='a';
                break
            case 'err':
                skin.color='red';
                skin.icon='b';
                break;
            case 'ibb':
                skin.color='black';
                skin.icon='c';
                break;
        }
        $.apoDialog
        .setZIndex(100010)
        .init(function(e,dialog){
            dialog.find('div').css('color',skin.color).prepend('<i class="prefix_icon {IC}"></i>'.replace('{IC}',skin.icon));
        })
        .clear(function(e,dialog){
            if($.isFunction(extJS)){ extJS();}
            if(typeof extJS ==='string'){ eval(extJS);};
        })
        .alert(message);
    };
    $.kc_alert("您的操作参数丢失了",'err',function(){console.log("is close action happend");alert("ok");});
});
</script>
</body>
</html>
